<template>
	<view class="w-picker-view">
		<picker-view class="d-picker-view" :indicator-style="itemHeight" :value="pickVal" @change="handlerChange">
			<picker-view-column>
				<view class="w-picker-item" v-for="(item,index) in range.provinces" :key="index">{{item.label}}</view>
			</picker-view-column>
			<picker-view-column>
				<view class="w-picker-item" v-for="(item,index) in range.citys" :key="index">{{item.label}}</view>
			</picker-view-column>
			<picker-view-column v-if="!hideArea">
				<view class="w-picker-item" v-for="(item,index) in range.areas" :key="index">{{item.label}}</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from "vuex"
	// import areaData from "./areadata/areadata.js"
	export default {
		data() {
			return {
				pickVal: [],
				range: {
					provinces: [],
					citys: [],
					areas: []
				},
				checkObj: {},
				treeOptions: []
			};
		},
		props: {
			itemHeight: {
				type: String,
				default: "44px"
			},
			value: {
				type: [Array, String],
				default: ""
			},
			defaultType: {
				type: String,
				default: "label"
			},
			hideArea: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			value(val) {
				setTimeout(() => {
					this.initData();
				}, 1000)
			}
		},
		created() {
			setTimeout(() => {
				this.initData();
			}, 1000)


		},
		computed: {
			// ...mapGetters(['treeOptions'])
		},
		mounted() {


		},
		methods: {

			getData() {

				//用来处理初始化数据
				let provinces = this.treeOptions;
				let dVal = [];
				let value = this.value;
				let a1 = value[0]; //默认值省
				let a2 = value[1]; //默认值市
				let a3 = value[2]; //默认值区、县
				let province, city, area;
				let provinceIndex = provinces.findIndex((v) => {
					return v[this.defaultType] == a1
				});
				provinceIndex = value ? (provinceIndex != -1 ? provinceIndex : 0) : 0;
				let citys = provinces[provinceIndex].children;
				let cityIndex = citys.findIndex((v) => {
					return v[this.defaultType] == a2
				});
				cityIndex = value ? (cityIndex != -1 ? cityIndex : 0) : 0;
				let areas = citys[cityIndex].children;
				let areaIndex = areas.findIndex((v) => {
					return v[this.defaultType] == a3;
				});
				areaIndex = value ? (areaIndex != -1 ? areaIndex : 0) : 0;
				dVal = this.hideArea ? [provinceIndex, cityIndex] : [provinceIndex, cityIndex, areaIndex];
				province = provinces[provinceIndex];
				city = citys[cityIndex];
				area = areas[areaIndex];
				let obj = this.hideArea ? {
					province,
					city
				} : {
					province,
					city,
					area
				}
				return this.hideArea ? {
					provinces,
					citys,
					dVal,
					obj
				} : {
					provinces,
					citys,
					areas,
					dVal,
					obj
				}
			},
			initData() {
				this.treeOptions = this.$store.getters.treeOptions
				// console.log(this.$store.getters.treeOptions, 'getters')
				if (!this.treeOptions) {
					return
				}
				let dataData = this.getData();
				let provinces = dataData.provinces;
				let citys = dataData.citys;
				let areas = this.hideArea ? [] : dataData.areas;
				let obj = dataData.obj;
				let province = obj.province,
					city = obj.city,
					area = this.hideArea ? {} : obj.area;
				let value = this.hideArea ? [province.value, city.value] : [province.value, city.value, area.value];
				let result = this.hideArea ? `${province.label}-${city.label}` :
					`${province.label}-${city.label}-${area.label}`;
				this.range = this.hideArea ? {
					provinces,
					citys,
				} : {
					provinces,
					citys,
					areas
				};
				this.checkObj = obj;
				this.$nextTick(() => {
					this.pickVal = dataData.dVal;
				});
				this.$emit("change", {
					result: result,
					value: value,
					obj: obj
				})
			},
			handlerChange(e) {
				let arr = [...e.detail.value];
				let provinceIndex = arr[0],
					cityIndex = arr[1],
					areaIndex = this.hideArea ? 0 : arr[2];
				let provinces = this.treeOptions;
				let citys = (provinces[provinceIndex] && provinces[provinceIndex].children) || provinces[provinces.length -
					1].children || [];
				let areas = this.hideArea ? [] : ((citys[cityIndex] && citys[cityIndex].children) || citys[citys.length -
					1].children || []);
				let province = provinces[provinceIndex] || provinces[provinces.length - 1],
					city = citys[cityIndex] || [citys.length - 1],
					area = this.hideArea ? {} : (areas[areaIndex] || [areas.length - 1]);
				let obj = this.hideArea ? {
					province,
					city
				} : {
					province,
					city,
					area
				}
				if (this.checkObj.province.label != province.label) {
					//当省更新的时候需要刷新市、区县的数据;
					this.range.citys = citys;
					if (!this.hideArea) {
						this.range.areas = areas;
					}

				}
				if (this.checkObj.city.label != city.label) {
					//当市更新的时候需要刷新区县的数据;
					if (!this.hideArea) {
						this.range.areas = areas;
					}
				}
				this.checkObj = obj;
				this.$nextTick(() => {
					this.pickVal = arr;
				})
				let result = ''
				area.label ? (result = this.hideArea ? `${province.label}-${city.label}` :
					`${province.label}-${city.label}-${area.label}`) : (result = this.hideArea ?
					`${province.label}-${city.label}` :
					`${province.label}-${city.label}`)

				let value = this.hideArea ? [province.value, city.value] : [province.value, city.value, area.value];
				this.$emit("change", {
					result: result,
					value: value,
					obj: obj
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "./w-picker.css";
</style>